<template>
	<div id="detail">
		<div>
			<mt-header fixed :title="message.title">
				<mt-button icon="back" @click="goBackTo()" slot="left">返回</mt-button>
				<mt-button icon="more" @click="morePopup()" slot="right"></mt-button>
			</mt-header>
		</div>
		<!--正在加载提示-->
		<div v-if="loadingData">
			<mt-spinner type="double-bounce" class="loadingData"></mt-spinner>
		</div>
		<div v-else="loadingData">
			<!--标题-->
			<div>
				<div id="title_Detail">{{ message.title }}</div>
			</div>
			<!--图片-->
			<el-card class="box-card">
				<div>
					<!--测试图片回传-->
					<!--<div>{{ message.rating }}</div>-->
					<!--图片地址需要进行拼接-->
					<img :src="'http://localhost:3000/' +  message.rating " class="imgDisplayStyle_1" />
				</div>
	
			</el-card>
			<!--发布者-->
			<div>
				<div id="poster_Detail">作者:{{ message.poster }}</div>
			</div>
			<!--简介-->
			<div>
	
				<div>
					<div class="meihua meihua1"></div>
					<div class="meihua meihua2"></div>
				</div>
	
				<div id="introduction_Detail">{{ message.introduction }}</div>
				<div>
					<div class="meihua meihua3"></div>
					<div class="meihua meihua4"></div>
				</div>
			</div>
	
			<!--评论表单-->
			<mt-popup v-model="popupComment" position="bottom" id="comment_popup">
				<div id="comment_popup_title">审核无误再增加其属性哦~
				</div>
				<div id="com_pop">
                     <select name="City" @change="changetype">
                    <option value="" selected="true" disabled="true">城市</option>
                    <option value="旅游" >旅游</option>
                     <option  value="美食">美食</option>
                </select>
					<!-- <mt-field v-model="use_critiques" id="comme_use_critiques" placeholder="评论:" type="textarea" rows="4"></mt-field> -->
					<mt-button id="comment_popup_btn" type="primary" @click="addtype()">增加属性</mt-button>
				</div>
			</mt-popup>
	
			<!--评论-->
			<div id="commect_cell">
				<div v-for="item in commect">
					<div id="use_name">
						评论者：{{item.poster}}
					</div>
					<div class="comment_1">
						{{item.use_critiques}}
					</div>
					<div id="comment_time">
						{{item.created_at}}
					</div>
				</div>
			</div>
			<!--评论后地信息提示-->
			<mt-popup v-model="popupCommentMessage" position="top">
				<span class="tishi">属性添加成功，审核完成！</Span>
			</mt-popup>
			<!--more标签点击查看发布评论和加入这个旅游-->
			<mt-popup v-model="comment_popup_more" position="right" id="comment_popup_more">
				<mt-button class="more_btn" type="default" @click="comment_click()">进一步确认</mt-button>
				
			
			</mt-popup>
			<!--加入旅游具体-->
			<mt-actionsheet :actions="actions" v-model="sheetVisible2"></mt-actionsheet>
	
		</div>
	</div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
export default {
	name: 'detail',
	data() {
		return {
			message: {},
			commect: [],
			mark_id: '',
			loadingData: true,
			detail_ID: '',
			poster: sessionStorage.getItem("username"),
			use_critiques: '',
			popupComment: false,
			popupCommentMessage: false,
			comment_popup_more: false,
			sheetVisible2: false,
			actions: [],
			detail_title: '',
			messagetype:''
			// 测试用：


		}
	},
	created() {
		this.getMessage(this.$route.params._id);
		this.getComment(this.$route.params._id);
		this.detail_ID = this.$route.params._id;
	},

	computed: {},
	methods: {
		// 返回按钮
		goBackTo() {
			this.$router.go(-1)
		},
		// 查询单条信息
		getMessage(_id) {
			// console.log(_id)
			axios.get(`/api/message/${_id}`)
				.then(res => {
					// console.log(res.data)
					this.message = res.data
					// this.detail_title = res.data.detail_title
					this.loadingData = false
				})
				.catch(err => {
					console.log(err)
				})
		},
		// 通过获取当前Detial的ID，到mongodb中获取该条信息的全部评论
		getComment(_id) {
			var detail_ID = _id;
			console.log("进入获取信息");
			// console.log(detail_ID);
			// axios.get(`/api/critiques`)
			axios.get(`/api/critiques/${detail_ID}`)
				.then(result => {
					this.commect = result.data;
					console.log("信息获取完成");
				})
				.catch(err => {
					console.log(err)
				})
		},
		// 往后台发送评论
		postComment() {
			if (this.poster == null) {
				this.$router.push({ path: '/login' })
			}
			else {
				axios.post('/api/critiques',
					{
						detail_ID: this.detail_ID,
						// detail_title:this.detail_title,
						poster: this.poster,
						use_critiques: this.use_critiques,
					})
					.then(res => {
						console.log(res.data);
						console.log("添加成功！");
						this.updateComment();
						this.comment_click_message();
					})
					.catch(e => {
						console.log(e)
					})
			}
		},
		//提交后更新提交列表
		updateComment() {
			this.getComment(this.detail_ID);
		},
		// 发表评论按钮
		comment_click() {
			this.comment_popup_more = false;
			this.popupComment = true;
		},
		// 发表评论后信息提示
		comment_click_message() {
			this.popupCommentMessage = true;
			this.popupComment = false;
		},
		// 点击more展示popuu
		morePopup() {
			this.comment_popup_more = true;
        },
        addtype(){
			var _id=this.detail_ID
          axios.post(`/api/message/${_id}`,{
			  type:this.messagetype
		  })
		  .then(res=>{
			  console.log("ok")
		  })
			// console.log(this.detail_ID)
        },
		changetype(e){
			// console.log(e.target.value)
          this.messagetype=e.target.value;
		  console.log(this.messagetype)
		}
	
	},
      watch:{
         messagetype:function(){
			 this.addtype()
		 }
	  }

	}


</script>

<style>
#detail {
	margin-top: 50px
}

.header {
	background-color: gray !important;
}

.mint-spinner-double-bounce-bounce1 {

	margin-left: 169px;
}

.mint-spinner-double-bounce-bounce2 {
	margin-left: 169px;
}

.imgDisplayStyle_1 {
	width: 100%;
}

#title_Detail {
	margin-left: 3px;
	text-align: left;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 15px;
}

#poster_Detail {
	text-align: left;
	color: gray;
	font-size: 13px;
	margin-top: 10px;
}

#introduction_Detail {
	background-color: rgba(144, 144, 144, 0.2);
	margin-left: 17px;
	margin-right: 17px;
	font-size: 14px;
	padding: 15px;
	text-align: left;
	line-height: 24px;
}

#use_name {
	/*border: 1px solid rgba(168, 40, 53, 1);
	border-radius: 0px 60px x;*/
	font-size: 12px;
	color: rgba(144, 144, 144, 1);
	text-align: left;
	margin-bottom: 5px;
}

.tishi {
	background-color: transparent;
	color: rgba(255, 255, 255, 1);
}

.comment_1 {
	background: linear-gradient(to right, rgba(24, 121, 255, 0.1), rgba(200, 144, 255, 0.5));
	/*background-color: rgba(126, 181, 255, 1);*/
	border-top-left-radius: 0px;
	border-top-right-radius: 60px;
	border-bottom-right-radius: 60px;
	border-bottom-left-radius: 60px;
	/*border-radius: 0px 60px x;*/
	/*height: 50px;
	border: 1px solid rgba(168, 40, 53, 1);*/
	/*padding-right: 20px;*/
	font-size: 12px;
	line-height: 19px;
	text-align: left;
	padding-left: 30px;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-right: 15px;
}

#comment_time {
	text-align: left;
	font-size: 10px;
	margin-left: 20px;
	color: rgba(144, 144, 144, 0.3);
	margin-bottom: 10px;
	margin-top: 5px;
}

#comment_popup {

	width: 100%;
	height: 42%;
	background-color: rgba( 240, 240, 240, 1);
}

#commect_cell {
	margin-top: 30px;
}

#com_pop {
	margin-top: 15px;
}

#comment_popup_title {
	font-size: 13px;
	text-align: left;
	margin-top: 15px;
	margin-left: 15px;
}

#comment_popup_btn {
	width: 95%;
	height: 35px;
	font-size: 13px;
	margin-top: 15px;
	background-color: rgba( 0, 200, 0, 0.8);
}

#comme_poster {
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 30px 30px;
	margin-bottom: 5px;
}

#comme_use_critiques {
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 20px 20px;
}

.meihua {

	background-color: red;
}

.meihua1 {
	margin-left: 94.3%;
	width: 20px;
	height: 9px;
	background-color: red;
}

.meihua2 {
	margin-left: 97%;
	width: 10px;
	height: 10px;
	background-color: red;
}

.meihua3 {
	width: 10px;
	height: 10px;
	background-color: red;
}

.meihua4 {
	width: 20px;
	height: 9px;
	background-color: red;
}

#comment_popup_more {
	width: 30%;
	height: 88%;
	margin-top: 0px;
	background: transparent;
}

.more_btn {
	width: 100%;
	background-color: white;
	font-size: 13px;
	border-radius: 0px 0px;
}
</style>